<!DOCTYPE html>
<html lang="en">
<head>
    <!--{% load static %}-->
    <meta charset="UTF-8">
    <title>微信群汇总</title>
    <meta name="viewport"
          content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <link href="https://cdn.bootcss.com/framework7/1.6.5/css/framework7.ios.min.css" rel="stylesheet">
    <link href="https://cdn.bootcss.com/framework7/1.6.5/css/framework7.ios.colors.css" rel="stylesheet">

</head>
    <style>
        .item-btnbox{
            margin-top: 20px;
        }
        .item-btnbox span{
            float: left;
            padding: 4px;
            border-radius: 4px;
            font-size: 12px;
            background: #007aff;
            color: #fff;
        }
        .item-btnbox span:last-child{
            margin-left:10px;
        }
        .close-popup img{
            position: absolute;
            top:50%;
            left:50%;
            margin-top: -125px;
            margin-left:-125px;
        }
        .tab-link.active{
            background-color: #6591c1;
        }
        .tab-link{
            border-color: #326295;
            overflow: visible;
            color: #ffffff;
            font-size: 16px;
        }
        .item-title{
            font-size: 16px;
        }

    </style>
<body>

<body>
<div class="views">
    <div class="view view-main" data-page="home">
        <div class="pages">
            <div data-page="home" class="page navbar-fixed">
                <div class="navbar" style="height: 120px;background-color: #326295"><!--标记 -->
                    <div class="navbar-inner">
                        <div class="left" style="text-align: center">
                            <a onclick="goIndex()" class="link">
                            <!--i class="icon icon-back"></i-->
                            <span style="font-size:16px;margin-bottom: 60px;margin-left: 10px;color: #ffffff">首页</span>
                            <span style="text-align:center;margin-bottom: 60px;margin-left: 96px;color: #ffffff;font-size: 20px;">旅动足球</span>
                        </a>
                        </div>
                        <div class="center" style="left: 0px;margin-top: 50px;margin-left: -140px">
                            <div class="nav-pills row">
								<a href="#tab3" class="tab-link button active">亚洲杯</a>
								<a href="#tab2" class="tab-link button">主队</a>
								<!--
                                <a href="#tab1" class="tab-link button">比赛</a>
                                <a href="#tab2" class="tab-link button">出发地</a>

                                -->
                            </div>
                        </div>
                        <div class="right"></div>
                    </div>
                </div>
                <div class="page">
                <div class="page-content tabs" style="margin-top: 50px">
					<div id="tab3" class="tab active">
                                <div class="content-block">
                                    <div class="list-block media-list">
                                        <ul>
                                            <li>
                                                <div class="item-content">
                                                    <div class="item-media">
                                                        <img src="http://worldcuptemp.oss-cn-beijing.aliyuncs.com/qrcode/2019%E4%BA%9A%E6%B4%B2%E6%9D%AF.JPG"
                                                             width="44">
                                                    </div>
                                                    <div class="item-inner">
                                                        <div class="item-title-row">
                                                            <div class="item-title">2019亚洲杯</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>

											<li>
                                                <div class="item-content">
                                                    <div class="item-media">
                                                        <img src="http://worldcuptemp.oss-cn-beijing.aliyuncs.com/qrcode/2019%20UAE%20Asia%20Cup.JPG"
                                                             width="44">
                                                    </div>
                                                    <div class="item-inner">
                                                        <div class="item-title-row">
                                                            <div class="item-title">2019 UAE Asia Cup</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
					       <!--
                            <div id="tab1" class="tab">
                                <div class="content-block">
                                    <div class="list-block media-list">
                                        <ul>
                                            <li>
                                                <div class="item-content">
                                                    <div class="item-media">
                                                        <img src="https://worldcuptemp.oss-cn-beijing.aliyuncs.com/wx_match_2.jpg"
                                                             width="44">
                                                    </div>
                                                    <div class="item-inner">
                                                        <div class="item-title-row">
                                                            <div class="item-title">世界杯揭幕战群</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>

                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div id="tab2" class="tab">
                                <div class="content-block">
                                    <div class="list-block media-list">
                                        <ul>
                                            <li>
                                                <div class="item-content">
                                                    <div class="item-media">
                                                        <img src="http://worldcuptemp.oss-cn-beijing.aliyuncs.com/webwxgetmsgimg.jpg"
                                                             width="44">
                                                    </div>
                                                    <div class="item-inner">
                                                        <div class="item-title-row">
                                                            <div class="item-title">北京(群满100)</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                             <li>
                                                <div class="item-content">
                                                    <div class="item-media">
                                                        <img src="http://worldcuptemp.oss-cn-beijing.aliyuncs.com/jiangzeyu.jpg"
                                                             width="44">
                                                    </div>
                                                    <div class="item-inner">
                                                        <div class="item-title-row">
                                                            <div class="item-title">上海(群满100)</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="item-content">
                                                    <div class="item-media">
                                                        <img src="https://worldcuptemp.oss-cn-beijing.aliyuncs.com/wx_start_2.jpg"
                                                             width="44">
                                                    </div>
                                                    <div class="item-inner">
                                                        <div class="item-title-row">
                                                            <div class="item-title">成都</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li><li>
                                                <div class="item-content">
                                                    <div class="item-media">
                                                        <img src="http://worldcuptemp.oss-cn-beijing.aliyuncs.com/wx_start_6.jpg"
                                                             width="44">
                                                    </div>
                                                    <div class="item-inner">
                                                        <div class="item-title-row">
                                                            <div class="item-title">江苏</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li><li>
                                                <div class="item-content">
                                                    <div class="item-media">
                                                        <img src="http://worldcuptemp.oss-cn-beijing.aliyuncs.com/wx_start_7.jpg"
                                                             width="44">
                                                    </div>
                                                    <div class="item-inner">
                                                        <div class="item-title-row">
                                                            <div class="item-title">浙江</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>



                                            <li>
                                                <div class="item-content">
                                                    <div class="item-media">
                                                        <img src="https://worldcuptemp.oss-cn-beijing.aliyuncs.com/wx_start_1.jpg"
                                                             width="44">
                                                    </div>
                                                    <div class="item-inner">
                                                        <div class="item-title-row">
                                                            <div class="item-title">广东</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>

                                            <li>
                                                <div class="item-content">
                                                    <div class="item-media">
                                                        <img src="https://worldcuptemp.oss-cn-beijing.aliyuncs.com/wx_start_3.jpg"
                                                             width="44">
                                                    </div>
                                                    <div class="item-inner">
                                                        <div class="item-title-row">
                                                            <div class="item-title">欧洲</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>

                                            <li>
                                                <div class="item-content">
                                                    <div class="item-media">
                                                        <img src="https://worldcuptemp.oss-cn-beijing.aliyuncs.com/wx_start_4.jpg"
                                                             width="44">
                                                    </div>
                                                    <div class="item-inner">
                                                        <div class="item-title-row">
                                                            <div class="item-title">俄罗斯</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>

                                            <li>
                                                <div class="item-content">
                                                    <div class="item-media">
                                                        <img src="https://worldcuptemp.oss-cn-beijing.aliyuncs.com/wx_start_5.jpg"
                                                             width="44">
                                                    </div>
                                                    <div class="item-inner">
                                                        <div class="item-title-row">
                                                            <div class="item-title">武汉</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            -->
                            <div id="tab2" class="tab">
                                <div class="content-block">
                                    <div class="list-block media-list">
                                        <ul>
                                            <li>
                                                <div class="item-content">
                                                    <div class="item-media">
                                                        <img src="https://worldcuptemp.oss-cn-beijing.aliyuncs.com/wx_team_3.jpg"
                                                             width="44">
                                                    </div>
                                                    <div class="item-inner">
                                                        <div class="item-title-row">
                                                            <div class="item-title">葡萄牙</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="item-content">
                                                    <div class="item-media">
                                                        <img src="https://worldcuptemp.oss-cn-beijing.aliyuncs.com/wx_team_1.jpg"
                                                             width="44">
                                                    </div>
                                                    <div class="item-inner">
                                                        <div class="item-title-row">
                                                            <div class="item-title">巴西</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="item-content">
                                                    <div class="item-media">
                                                        <img src="https://worldcuptemp.oss-cn-beijing.aliyuncs.com/wx_team_2.jpg"
                                                             width="44">
                                                    </div>
                                                    <div class="item-inner">
                                                        <div class="item-title-row">
                                                            <div class="item-title">法国</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="item-content">
                                                    <div class="item-media">
                                                        <img src="https://worldcuptemp.oss-cn-beijing.aliyuncs.com/wx_team_4.jpg"
                                                             width="44">
                                                    </div>
                                                    <div class="item-inner">
                                                        <div class="item-title-row">
                                                            <div class="item-title">英格兰</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                            <li>
                                                <div class="item-content">
                                                    <div class="item-media">
                                                        <img src="https://worldcuptemp.oss-cn-beijing.aliyuncs.com/wx_team_5.jpg"
                                                             width="44">
                                                    </div>
                                                    <div class="item-inner">
                                                        <div class="item-title-row">
                                                            <div class="item-title">德国</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>

                                            <li>
                                                <div class="item-content">
                                                    <div class="item-media">
                                                        <img src="https://worldcuptemp.oss-cn-beijing.aliyuncs.com/wx_team_6.jpg"
                                                             width="44">
                                                    </div>
                                                    <div class="item-inner">
                                                        <div class="item-title-row">
                                                            <div class="item-title">西班牙</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>

                                            <li>
                                                <div class="item-content">
                                                    <div class="item-media">
                                                        <img src="https://worldcuptemp.oss-cn-beijing.aliyuncs.com/wx_team_7.jpg"
                                                             width="44">
                                                    </div>
                                                    <div class="item-inner">
                                                        <div class="item-title-row">
                                                            <div class="item-title">比利时</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>

											<li>
                                                <div class="item-content">
                                                    <div class="item-media">
                                                        <img src="https://worldcuptemp.oss-cn-beijing.aliyuncs.com/wx_team_8.jpg"
                                                             width="44">
                                                    </div>
                                                    <div class="item-inner">
                                                        <div class="item-title-row">
                                                            <div class="item-title">阿根廷</div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>

                    </div>
                <div/>
            </div>
        </div>


    </div>
<!-- <div class="page-content">
      <div class="content-block">
        <p><a href="#" class="open-about">Open About Popup </a></p>
        <p><a href="#" class="open-services">Open Services Popup </a></p>
      </div>
    </div> -->
  <!-- About Popup -->
  <div class="popup popup-about" onclick="myApp.closeModal($('.popup'))">
    <div class="content-block" id="wxgroupPopup" onclick="myApp.closeModal($('.popup'))">

      <h4 style="text-align: center" id="point">长按识别二维码，点击关闭</h4>
      <h4 style="text-align: center;">如二维码过期，请直接加管理员拉入群</h4>
        <img src="img/jiangzeyu.jpg" height="100%" width="100%" alt="" class="popup_img">
    </div>
  </div>
</div>

<script src="https://cdn.bootcss.com/framework7/1.6.5/js/framework7.min.js"></script>
<script>
    var myApp = new Framework7({
        tapHold: true,
        tapHoldDelay: 750,
        tapHoldPreventClicks: true //长按后不会触发click事件
    });
</script>
<!--cnzz统计代码,误删-->
<script type="text/javascript">var cnzz_protocol = (("https:" == document.location.protocol) ? " https://" : " http://");document.write(unescape("%3Cspan id='cnzz_stat_icon_1267142462'%3E%3C/span%3E%3Cscript src='" + cnzz_protocol + "s13.cnzz.com/z_stat.php%3Fid%3D1267142462%26show%3Dpic1' type='text/javascript'%3E%3C/script%3E"));</script>

</body>

<script src="https://cdn.bootcss.com/framework7/1.6.5/js/framework7.min.js"></script>
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
<script>
	var $$ = Dom7;
	$(document).ready(function() {
		//判断入口
		var url = location.href;
    	var num=url.indexOf("?")
		var paramStr = url.substr( num + 1);
    	var params = paramStr.split("&"); //各个参数放到数组里
		var joboEntrance;
	    for(var i=0;i < params.length; i++){
			num = params[i].indexOf("=");
			if(num > 0){
				 var name = params[i].substring(0,num);
				 if(name == "joboEntrance"){
				 	joboEntrance = params[i].substr(num+1);
				 }
			}
	    }
	    if(joboEntrance == "1" || joboEntrance == 1){	//小程序
			$("#point").append("<b><strong>(小程序不支持长按扫码，请先保存图片)</strong></b>");
		}
    	//动态添加微信群
		var html = "";
		$.get("https://worldcup.dmpb.com.cn/api/game/list",function (data) {
			var games = data.content;
			for(var i = 0 ; i < games.length; i ++){
				var game = games[i];
				var id = game.id;
				if(id < 10){
					id = "0" + id;
				}
				var name = game.matchName;
				html = html + "<li><div class=\"item-content\"><div class=\"item-media\"><img src=\"https://worldcuptemp.oss-cn-beijing.aliyuncs.com/match_"
				+ id
				+ ".jpg\" width=\"44\"> </div><div class=\"item-inner\"><div class=\"item-title-row\"><div class=\"item-title\">"
				+ name
				+ "</div></div></div></div></li>";

			}
			console.log(html);
			$("#tab1 ul").append(html);

			var picArray=new Array();
			picArray[0] = "http://worldcuptemp.oss-cn-beijing.aliyuncs.com/webwxgetmsgimg.jpg";
			picArray[1] = "http://worldcuptemp.oss-cn-beijing.aliyuncs.com/jiangzeyu.jpg";

			var $$ = Dom7;
			var innerLength = $$('.item-inner');
			var str = '<div class="item-title-row"><div class="item-title item-btnbox">'+
				'<span style="background-color:#EB4D8A;font-size:14px">申请加入</span><span style="font-size:14px;background-color:#326295">联系管理员</span></div></div>'
			for (var i = 0; i < innerLength.length; i++) {
				innerLength.eq(i).append(str)
			};

			$('.item-inner span').on('click',function(){
				var _index = $$(this).index();
				var src ;
				console.log(_index);
				var urlevent;
				if(_index == 0){
					urlevent = "点击申请加入"
				}else if(_index == 1){
					urlevent = "点击联系管理员"
				}
				_index?$('.popup_img').attr('src',picArray[Math.ceil(Math.random()*10) % 2])
						:$('.popup_img').attr('src',$(this).parents('.item-content').children('.item-media').children('img').attr('src'))
				myApp.popup('.popup-about');


				$.post('https://dmpb.com.cn/api/tracking/push_event/',
						{"url":"wxgroup.html", "event":urlevent});
			});

			$$('#wxgroupPopup').on('taphold', function () {
			  $.post('https://dmpb.com.cn/api/tracking/push_event/',
						{"url":"wxgroup.html", "event":"长按识别二维码"});
			})
		});

	});

    function goIndex(){
        $.post('https://dmpb.com.cn/api/tracking/push_event/',
                {"url":"wxgroup.html", "event":"回到首页"});
        location='/index';
    }

</script>
</html>
